<script>
import { processOutput, getMemoryBus } from '@/api/workflow'
import Codemirror from '@/components/PythonCodemirror'

export default {
  components: {
    Codemirror
  },
  model: {
    prop: 'code_from',
    event: 'codeChange'
  },
  props: {
    show_titleandTools: {
      type: Boolean,
      default: true
    },
    // eslint-disable-next-line vue/prop-name-casing
    code_from: {
      type: String,
      required: true,
      default: 'def process_output(output):'
    }
  },
  data() {
    return {
      memoryBusVisible: false,
      memoryBus: {},
      codeResultVisible: false,
      codeResult: {},
      code: this.code_from,
      completeCode: false,
      showEdit: false
    }
  },
  computed: {
    downOrUp() {
      return (this.showEdit ? 'el-icon-arrow-up' : 'el-icon-arrow-down')
    }
  },
  watch: {
    code_from(newValue) {
      this.code = newValue
    },
    code(newVal) {
      this.$emit('codeChange', newVal)
    }
  },
  created() {
    // this.code = 'def process_output(output):'
  },
  methods: {
    confirmOutput() {
      const data = {
        'code': this.code
      }
      console.log('data: ', data)
      /* 发送规整代码 */
      processOutput(data).then(res => {
        console.log(res)
        // 将响应作为内容以弹出框弹出
        this.codeResult = res
        this.codeResultVisible = true
      }).catch(error => {
        console.log(error)
      })
    },
    getMemoryBus() {
      // alert('获取Memory Bus')
      getMemoryBus().then((res) => {
        console.log(res)
        // 设定内容并弹出弹窗
        this.memoryBus = res
        this.memoryBusVisible = true
      })
    },
    saveCode() {
      this.completeCode = true
      this.showEdit = false
      this.$emit('save_code')
    },
    changeShowCode() {
      this.showEdit = !this.showEdit
    }
  }
}
</script>

<template>
  <div  class="app-container">
    <el-row v-if="show_titleandTools" type="flex" align="middle">
      <!-- 当参数选择成功后，展示一个完成图标 -->
      <el-col v-if="completeCode" :span="1">
        <i class="el-icon-success" style="font-size: 26px; color: green" />
      </el-col>
      <!-- 说明部分 -->
      <el-col>
        <p>
          <span style="font-weight: bold">输出子任务：</span>
          编辑输出控制代码
        </p>
      </el-col>
      <el-col :span="1.5">
        <el-button @click="changeShowCode"><i :class="downOrUp" /></el-button>
      </el-col>
    </el-row>
    <div v-show="showEdit">
      <!-- 代码输入框部分 -->
      <!-- <el-input v-model="code" type="textarea" /> -->
      <Codemirror v-model="code" />
      <!-- 运行输出部分 -->
      <div v-if="show_titleandTools" class="app-container">
        <el-row type="flex" align="middle" justify="center" :gutter="6">
          <el-col :span="2.5">
            <el-button type="primary" @click="saveCode">保存代码</el-button>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" @click="confirmOutput">测试执行本任务</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 弹出MemoryBus的部分 -->
    <el-dialog :visible.sync="memoryBusVisible" title="Memory Bus 的内容如下:">
      <json-viewer :value="memoryBus" />
    </el-dialog>
    <!-- 弹出运行结果的部分 -->
    <el-dialog :visible.sync="codeResultVisible" title="输出的的内容如下:">
      <json-viewer :value="codeResult" />
    </el-dialog>
  </div>
</template>

<style scoped>
.app-container {
  left: 0;
  width: 100%;
  margin-top: 15px      ;
  background-color: white;
}
</style>
